<template>
  <div>
      <div class="product-list-tabs">
      <van-tabs v-model="param.status" @click="handleClick" sticky >
        <van-tab title="未上架" name="0">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-card
              v-for="item in result"
              :key="item.id"
              num="2"
              :price="item.price"
              :title="item.name"
              :desc="item.subTitle"
              :thumb="item.pic"
              @click="handleProject(item)"
            >
              <template #tags>
                <van-tag plain type="danger" v-if="item.promotionType !=0">活动</van-tag>
              </template>
              <template #footer>
                <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
          </van-list>
        </van-tab>
        <van-tab title="已上架" name="1">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-card
              v-for="item in result"
              :key="item.id"
              num="2"
              :price="item.price"
              :title="item.name"
              :desc="item.subTitle"
              :thumb="item.pic"
              @click="handleProject(item)"
            >
              <template #tags>
                <van-tag plain type="danger" v-if="item.promotionType !=0">活动</van-tag>
              </template>
              <template #footer>
                <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
          </van-list>
        </van-tab>
      </van-tabs>
      </div>

    
    <el-footer class="footer bottom">
      <van-button type="primary" class="footer-add bottom-button" block @click.native.prevent="handleAdd">新增商品 </van-button>
    </el-footer>
  </div>
</template>

<script>
import { listProduct } from "@/api/product";
import projectItem from "./components/projectItem";
export default {
  components: { projectItem },
  created() {},
  data() {
    return {
      loading: false,
      finished: false,
      param: {
        status: "0",
        pageSize: 1,
        pageNum: 1
      },
      noMore: false,
      result: []
    };
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    onLoad() {
      this.loading = true;
      listProduct(this.param).then(response => {
        this.loading = false;
        this.result = this.result.concat(response.data);
        if (response.data.length == 0) {
          this.finished = true;
        }
        this.param.pageNum = this.param.pageNum + 1;
      });
    },

    handleClick(vare) {
      this.result = [];
      this.param.pageNum = 1;
      this.finished = false;
      this.onLoad();
    },
    handleAdd() {
      this.$router.push({ path: "/addProduct" });
    },
    handleProject(product) {
      this.$router.push({ path: "/scan/?id=" + product.id });
    }
  }
};
</script>
<style scoped>

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 44px;
  background-color: white;
  text-align: right;
}
.footer-add {
  float: right;
  vertical-align: middle;
}
</style>